<template>
  <div>
    <div class="information_top">
      <div class="information_top_select">
        <span>类型</span>
        <el-select
          v-model="value"
          clearable
          :placeholder="options[0].label"
          v-if="options.length > 0"
          @change="typeSelection"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select clearable placeholder="请选择" v-else></el-select>
      </div>
      <div class="information_top_ result">
        <div class="result_item">
          共
          <span>{{ newsData.total }}</span>条,未读信息
          <span class="num">{{ unreadValue }}</span>条
          <span class="reader" @click="Read">标为已读</span>
          <span class="del" @click="deleteNews">删除</span>
        </div>
      </div>
    </div>
    <div class="content-list">
      <el-table
        border
        ref="table"
        :data="newsData.records"
        :header-cell-style="{'text-align':'center'}"
        borderstyle="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column prop="patentType" label="状态" width="80px">
          <template slot-scope="{row}">
            <div>{{row.isRead === 1 ? '已读':'未读'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="120px" />
        <el-table-column prop="patentStatus" label="消息">
          <template slot-scope="{row}">
            <span v-html="row.formatContent"></span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="通知时间" width="150px" />
      </el-table>
    </div>
    <div class="pageList">
      <paging ref="paging_zi" @CurrentPage="accept_CurrentValue" />
    </div>
  </div>
</template>

<script>
import paging from "../../../components/paging.vue";
import {
  commonRequest,
  updateMassageReadStatus,
  deleteMassage,
  getMessageUnreadTotal,
  getMessageTypeAll
} from "../../../api/api.js";

export default {
  components: {
    paging
  },
  name: "information",
  data() {
    return {
      loading: true, // 添加loding

      options: [], // 消息类型
      value: "",

      newsData: [], // 所有消息

      unreadValue: 0, // 未读消息总计
      checkModel: [],

      checkModelId: "", // 当前选择的Id
      pageIndex: 1
    };
  },
  mounted() {
    this.getMessageTypeAll();
    this.getMessageUnreadTotal();
    this.newsRequest();
  },
  methods: {
    accept_CurrentValue(value) {
      this.pageIndex = value;
      this.newsRequest();
    },
    // 所有消息
    newsRequest() {
      var typeValue = "";
      if (this.value !== "") {
        typeValue = this.options[this.value].label;
      }
      this.loading = true;
      commonRequest("/api/ums/umsMessage/list", {
        pageNo: this.pageIndex,
        type: typeValue
      }).then(res => {
        this.loading = false;
        this.newsData = res;
        this.$refs.paging_zi.totalValue(res.total);
      });
    },
    getMessageTypeAll() {
      getMessageTypeAll().then(res => {
        let arr = res.result;
        for (let i = 0; i < arr.length; i++) {
          this.options.push({
            value: i,
            label: arr[i]
          });
        }
      });
    },
    getMessageUnreadTotal() {
      getMessageUnreadTotal().then(res => {
        this.unreadValue = res.result;
      });
    },
    // 表格全选
    handleSelectionChange(val) {
      this.checkModel = val;
      let arr = [];
      this.checkModel.forEach(item => {
        arr.push(item.id);
      });
      this.checkModelId = arr.join(",");
      console.log(this.checkModelId);
    },
    // 标记为已读
    Read() {
      if (!this.checkModel.length) {
        this.$message({
          message: "请先选择需要标记为已读的消息！",
          type: "warning"
        });
      } else {
        updateMassageReadStatus(this.checkModelId).then(res => {
          if (res.code === 200) {
            this.checkModel = [];
            this.checkModelId = "";
            this.$message({
              message: "操作成功！",
              type: "success"
            });
            this.newsRequest();
          }
        });
      }
    },
    // 删除消息
    deleteNews() {
      if (!this.checkModel.length) {
        this.$message({
          message: "请先选择需要删除的消息！",
          type: "warning"
        });
      } else {
        deleteMassage(this.checkModelId).then(res => {
          if (res.code === 200) {
            this.checkModel = [];
            this.checkModelId = "";
            this.$message({
              message: "操作成功！",
              type: "success"
            });
            this.newsRequest();
          }
        });
      }
    },
    // 类型选择
    typeSelection() {
      this.pageIndex = 1;
      this.checkModelId = "";
      this.checkModel = [];
      this.newsRequest();
    }
  }
};
</script>

<style lang="less" scoped>
.information_top {
  width: 900px;
  height: 80px;
  padding: 25px 0;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .information_top_select {
    margin-left: 10px;

    span {
      margin-right: 10px;
      font-size: 14px;
    }
  }

  .information_top_ {
    margin-right: 10px;

    .result_item {
      span {
        border-radius: 6px;
        font-size: 14px;
        margin: 0 4px;
        color: #44a2ff;
      }

      .num {
        color: #1f2a35;
        font-size: 14px;
        color: #44a2ff;
      }

      .reader {
        color: #fff;
        background-color: #44a2ff;
        padding: 5px 16px;
        cursor: pointer;
      }

      .del {
        padding: 5px 16px;
        color: #44a2ff;
        border: 1px solid #44a2ff;
        cursor: pointer;
      }
    }
  }
}

.information_main {
  margin-top: 15px;

  .information_main_hd {
    height: 50px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;

    div {
      display: flex;
      align-items: center;
      height: 100%;
      border-right: 1px solid #ccc;
      padding: 0 20px;
      font-size: 14px;
    }

    .check {
      width: 60px;
    }

    .state {
      width: 80px;
    }

    .categroy {
      width: 120px;
    }

    .info {
      width: 460px;
    }

    .date {
      width: 180px;
      border: none;
    }
  }

  .information_main_bd {
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .informartion_item {
      min-height: 60px;
      display: flex;
      justify-content: center;
      border-left: 1px solid #ccc;

      div {
        display: flex;
        padding: 10px 20px 0;
        font-size: 14px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
      }

      .check_content {
        width: 60px;
      }

      .state_content {
        width: 80px;
      }

      .categroy_content {
        width: 120px;
      }

      .info_content {
        width: 460px;

        .info_active {
          font-size: 14px;

          span {
            color: #44a2ff;
            font-size: 12px;
            margin-left: 8px;
          }
        }
      }

      .data_content {
        width: 180px;
      }
    }
  }
}

.pageList {
  height: 100px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
</style>
<style>
.info_active a {
  color: rgb(68, 162, 255);
}
</style>
